<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inputstream Data Viewer</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>
<body>
	<div id="app" class="container-fluid">

	<div class="row-fluid">
		<div class="col-sm-12">
			<h3 class="page-header text-center">
			输入流数据浏览 <small>(Inputstream Data Viewer)</small>
			</h3>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-12">
		
		<!-- Nav tabs -->
		<ul class="nav nav-tabs" role="myTabs">
			<li role="presentation" class="active"><a href="#simplefilter" aria-controls="simplefilter" role="tab" data-toggle="tab">搜索</a></li>
			<li role="presentation" class="col-sm-2"><a href="#advancedsearch" aria-controls="advancedsearch" role="tab" data-toggle="tab">高级</a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content col-sm-12">
			<div role="tabpanel" class="tab-pane active" id="simplefilter">
				<form id="search">
						<div class="form-group">
							<label class="col-sm-offset-5 col-sm-1 control-label" style="text-align:right">搜索过滤</label>
							<div class="col-sm-4">
								<input id="searchQuery" name="query" type="text" style="float:right" v-model="searchQuery" class="form-control" required />
							</div>
							<div class="col-sm-2">
								<button id='submitbutton' class="btn btn-outline btn-block btn-success save">提交</button>
							</div>
						</div>
				</form>
				<br />
				<br />
				<br />
			</div>
		
			<div role="tabpanel" class="tab-pane fade col-sm-12" id="advancedsearch">
				<div id="searchDiv" class="span12">
						<br />
					<!--
					<fieldset>
						<legend><small>请输入查询条件</small></legend> 
					-->
						<form class="form-horizontal contract-form">
					
						<div class="form-group">
							<label class="col-sm-1 control-label">Begin Time</label>
							<div class="col-sm-4">
								<input id="begintime" name="begintime" type="text" v-model="begintime" value="2015-01-01" class="form-control" required />
							</div>
							<label class="col-sm-3 control-label">End Time</label>
							<div class="col-sm-4">
								<input id="endtime" name="endtime" type="text" v-model="endtime" value="2015-02-01"
									class="form-control" required />
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-1 control-label">Logger Id</label>
							<div class="col-sm-4">
								<input id="deviceid" name="deviceid" type="text" v-model="remotedevice" value=""
									class="form-control" required />
							</div>
						</div>
						
						<div class="form-group">
							<div class="col-sm-offset-9 col-sm-1">
								<button class="btn btn-outline btn-block btn-warning">清除</button>
							</div>
							<div class="col-sm-2">
								<!--
								<button id='submitbutton' type="submit" class="btn btn-outline btn-lg btn-block save">Submit</button>
								-->
								<button id='submitbutton' class="btn btn-outline btn-block btn-success save">提交</button>
							</div>
						</div>

						</form>
					<!--
					</fieldset>	
					-->
				</div> 
			</div> <!-- advancedsearch tab -->
		</div> <!-- tab-content -->
		
		</div> <!-- col-sm-12 -->
	</div>


	<!--
	<div id="app" style="padding:20px">
	<div class="row" id="app">
	-->
	<div class="row">
		<div class="col-sm-12">
			<button class="btn btn-default " v-on="click:removeSelected($event)">删除选中记录</button>
		</div>
		<div class="col-sm-12">
			<br/>
		</div>

		<div class="table-responsive col-sm-12">
			<table class="table table-bordered table-condensed table-striped">
			<thead>
				<tr class="info"> 
				<th>选择</th> 
				<th>时刻</th> 
				<th>设备标识</th> 
				<th>数据</th> 
				<th>操作</th> 
				</tr> 
				<tr> 
				<th>#</th> 
				<th>Timestamp</th> 
				<th>Device Node</th> 
				<th>Payload</th> 
				<th>Operation</th> 
				</tr> 
			</thead>
			<!--
			<tfoot>Table footer</tfoot>			
			-->
			<tbody>
				<!--
				<tr class="list-group-item item" v-repeat="item:items" track-by="rowid">
				-->
				<tr v-repeat="item:items" track-by="rowid">
				<!--
				<td><input type="checkbox" v-model="item.selected"> {{item.selected ? "yes" : "no"}}</td> 
				-->
				<td><input type="checkbox" v-model="item.selected"> </td> 
				<td>{{item.timestamp}}</td> 
				<td>{{item.node}}</td> 
				<td>{{item.frame}}</td> 
				<td><button class="btn btn-default btn-xs " v-on="click:removeItem(item,$event)"> .删除. </button></td>
				</tr> 
			</tbody>
			</table>
		</div>
	
		<div class="col-sm-12">
		注：输入流数据来自实际测试过程中记录的数据文件。本模块仅用于查看数据的内容以辅助判断数据的正确性。
		</div>
		
		<div class="col-sm-12">
		<hr />
		<p>for Debug only: </p>
		<pre>
			<div>{{ $data | json }}</div>
		</pre>	
		</div>
	</div>

    <script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
    <script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="../../lib/vue/0.12.10/vue.js"></script>
    <script src="stream-readonly-v8.js"></script>
</body>
</html>